<template>
    <el-dialog title="关联产品模块" :visible.sync="dialogVisible" width="80%">
        <div class="customer-relation">
            <div class="page-header">
                <div class="page-title">

                </div>
                <div class="header-right">
                    <el-button type="primary" @click="addCustomer">新建产品</el-button>
                    <el-dropdown trigger="click" class="more">
                        <el-button><i class="el-icon-more"></i></el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><i class="rp rp-import"></i>导入</el-dropdown-item>
                            <el-dropdown-item><i class="rp rp-export"></i>导出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>

            <div class="searchBox">
                <el-input v-model="search" placeholder="产品名称" class="search-input">
                    <i slot="suffix" class="el-input__icon el-icon-search"></i>
                </el-input>

                <el-select v-if="openScreen" v-model="value" placeholder="请选择" style="width:150px;margin-left: 10px;">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>

                <div class="tabsBox">
                    <span class="options-label">显示：</span>
                    <el-button v-for="item in sceneList.filter((res) => res.isSystem != 0)" :key="item.sceneId"
                        :class="avtiveSceneId == item.sceneId ? 'activeScene' : ''"
                        @click="sceneClick(item, 'clearSceneName')">{{
                            item.name }}</el-button>
                    <el-dropdown trigger="click" style="margin-left: 10px;">
                        <el-button size="small" :type="activeSceneName ? 'primary' : ''">
                            {{ activeSceneName}}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown" class="commonDropdown">
                            <el-dropdown-item v-for="(item, index) in tabs.filter((res) => res.isSystem != 1)"
                                :key="item.sceneId" :class="avtiveSceneId == item.sceneId ? 'active' : ''"
                                @click.native="sceneClick(item)">
                                {{ item.name }}
                            </el-dropdown-item>
                            <el-dropdown-item class="last" @click.native="setScene()">
                                <!-- <i class="el-icon-s-tools"></i> -->
                                <span>下架的产品</span>
                            </el-dropdown-item>
                            <el-dropdown-item class="last" @click.native="setScene()">
                                <!-- <i class="el-icon-s-tools"></i> -->
                                <span>我关注的产品</span>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>

                <div>
                    <table-header-filters :selection-list="tableSelectionList" :condition-type-fun="undefined"
                        :fields="getFilterFields" :props="tableHeaderProps.props"
                        :filter-header-props="tableHeaderProps.filterHeaderProps"
                        :filter-form-props="tableHeaderProps.filterFormProps" @changeState="changeFlagState"
                        @operations-click="tableOperationsClick" @event-change="tableHeaderHandle"
                        @filter-change="handleFilter" />
                </div>
            </div>
            <div class="listTable">
                <clueTable :tableData="tableData" :freezingColumn="freezingColumn"></clueTable>
            </div>

        </div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            <el-button @click="dialogVisible = false">取 消</el-button>
        </span>

        <addDialog ref="addDialog" :dialogTitle="dialogTitle" :list="listFrom" :dialogType="dialogType"></addDialog>
    </el-dialog>
</template>
<script>
import clueTable from '@/components/clueManage/clues/clueTable'
import forzenHeader from '@/views/customerManage/custom/forzenHeader';
import TableHeaderFilters from '@/components/FieldFilters/TableHeaderFilters'
import TableMixin from '@/components/FieldFilters/tableMixin'
import addDialog from '@/components/DialogCustom/addDialog.vue' 
import dataadd from '@/components/DialogCustom/dataadd.js'

export default {
    name: "customerRelation",
    components: { clueTable, TableHeaderFilters, addDialog },
    mixins: [TableMixin],
    props: {
        phone: String,
        action: {
            type: Object,
            default: () => {
                return {
                    type: "save",
                    id: "",
                    data: {},
                };
            },
        },
    },
    data() {
        return {
            dialogVisible: false,
            loading: false,
            search: "",
            sceneList: [
                { sceneId: "1666713333092839424", isSystem: 1, name: "全部产品" },
                { sceneId: "1666713333092839425", isSystem: 1, name: "上架的产品" },
            ],
            avtiveSceneId: "1666713333092839424",
            activeSceneName: "",
            openScreen: false,
            tableData: [
                { merchantNum: 'aaa' },
                { merchantNum: 'bbb' },
                { merchantNum: 'ccc' },
            ],
            freezingColumn: forzenHeader.allHeader,
            createAction: {
                type: 'save',
                id: '',
                data: {}
            },
            tabs: [],
            dialogTitle:'',
            listFrom:[],
            dialogType:1,
        };
    },
    mounted() {
        this.$nextTick(() => {
            const fatherDom = document.querySelector("body");
            if (fatherDom.append) {
                fatherDom.append(this.$el);
            } else {
                fatherDom.appendChild(this.$el);
            }
        })
        this.queryTabs()
    },
    methods: {
        queryTabs() {
            this.tabs = this.sceneList;
            this.avtiveSceneId = this.tabs[0].sceneId
            this.activeSceneName = this.tabs[0].isSystem == 1 ? '' : this.tabs[0].name
        },
        cellClass({ row, column, rowIndex, columnIndex }) {
            if (column.property === 'merchantNum') {
                return 'look--underline'
            } else {
                return ''
            }
        },
        //新建产品
        addCustomer() {
            this.dialogType = 1;
            this.dialogTitle = "创建联系人"
            this.listFrom = JSON.parse(JSON.stringify(dataadd.phone)).data
            this.$refs.addDialog.showFun();
        },
        showRelationFun() {
            this.dialogVisible = true;
            console.log("wwwwwwwwwwwwwwwww")
        },
        closeFun() {
            this.dialogVisible = false;
        },
        //更新下拉状态
        changeFlagState(val) {
            this.openScreen = val
        },
    },
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/custom-tab-serch.scss";

.customer-relation {
    padding: 22px 32px;

    .page-header {
        display: flex;
        justify-content: space-between;

        .page-title {
            display: flex;
            align-items: center;

            .title {
                font-weight: 500;
                font-size: 24px;
                color: #172b4d;
            }

            .title-icon {
                color: #42526e;
                cursor: pointer;
                margin-left: 4px;
                font-size: 16px;
            }
        }

        .header-right {
            .more {
                margin-left: 8px;
            }
        }
    }


    .regular-row {
        display: flex;
        flex-direction: row;
        text-align: left;
        align-items: center;
        width: 100%;

        .search-input {
            width: 200px;
        }

        .options-wrap {
            margin-left: 24px;
            display: flex;
            flex: 1;
            overflow-x: auto;
            white-space: nowrap;
            align-items: center;

            .options-label {
                margin-right: 8px;
            }
        }
    }

    .activeScene {
        color: #fff;
        background-color: #344563;
    }

    .senior-scene {
        margin-top: 8px;
        padding: 16px;
        box-shadow: 0 4px 8px -2px rgba(9, 30, 66, 0.25),
            0 0 1px rgba(9, 30, 66, 0.31);

        .senior-scene-title {
            color: #5e6c84;
        }

        .senior-scene-btn-wrap {
            margin-top: 10px;
        }

    }
}</style>